浅析npm run serve命令

您所在的位置：网站首页 › vue 启动命令 › 浅析npm run serve命令

浅析npm run serve命令

2023-07-21 00:21| 来源: 网络整理| 查看: 265

本地开发一般通过执行 npm run serve 命令来启动项目，那这行命令到底存在什么魔法？我们来一探究竟。

根据这篇文章思路：使用vue-cli初始化后运行npm run server到底干了什么得知，npm run serve 实际上会执行 vue-cli-service serve（该文件位于 node_modules.bin\vue-cli-service.cmd），查看该文件，发现最终会执行 node vue-cli-service.js serve（该文件位于 node_modules@vue\cli-service\bin\vue-cli-service.js）。 vue-cli-service.js就是我们的切入口。关键代码：

const Service = require('../lib/Service') //... const service = new Service(... //... service.run(command, args, rawArgv).catch(err => { error(err) process.exit(1) })

根据这篇文章思路：vue-cli系列之vue-cli-service整体架构浅析实际执行的文件为 serve.js（该文件位于 node_modules@vue\cli-service\lib\commands\serve.js）关键代码：

const WebpackDevServer = require('webpack-dev-server') //... const webpackConfig = api.resolveWebpackConfig() //... const compiler = webpack(webpackConfig) const server = new WebpackDevServer(compiler, ... //... server.listen(port, host, err => { if (err) { reject(err) } })

可以很清楚的看到，serve.js 中使用了 webpack-dev-server 作为http服务器，启动并监听端口提供服务（不知道webpack-dev-server的话可以暂且将它理解为 nginx）。这么下来，思路就清晰了，npm run serve 最最终的目的就是启动一个 webpack-dev-server服务器。 webpack-dev-server原生的配置繁多，学习成本不小，既然vue-cli将webpack-dev-server集成到脚手架中，那一定是帮我们做了很多事情。列举几个点：

主页面 WebpackDevServer构造器第二个入参，historyApiFallback属性 -> genHistoryApiFallbackRewrites，设置了根路径会重定向到 index.html（即为主页面）。入口文件 WebpackDevServer构造器第一个入参 -> webpackConfig -> Service.resolveWebpackConfig -> resolveChainableWebpackConfig -> webpackChainFns 追踪 webpackChainFns 的来源，可以发现 base.js （node_modules@vue\cli-service\lib\config\base.js）会设置 ./src/main.js 为入口文件。 webpackConfig .mode('development') .context(api.service.context) .entry('app') .add('./src/main.js')

等等等等… 另外，我们在vue.config.js上的配置或多或少都会映射到webpack-dev-server的配置上。这个当然就要参看vue.config.js的文档啦。

小结命令依赖链：npm run serve -> node_modules\.bin\vue-cli-service.cmd serve -> node node_modules\@vue\cli-service\bin\vue-cli-service.js servevue-cli 的开发环境实际上使用了 webpack-dev-server 模块实现。vue.config.js 的配置会作用到 webpack-dev-server 上。

references: vue-cli-service serve 官方文档 vue.config.js 官方文档 Webpack 官方文档 Webpack DevServer 官方文档 vue-cli系列之vue-cli-service整体架构浅析使用vue-cli初始化后运行npm run server到底干了什么

【本文地址】

浅析npm run serve命令

浅析npm run serve命令

今日新闻

推荐新闻